<template>
    <div class="my-card-box" :style="{top:top,left:left }" :class="{sub: isFlag}"
         @click="isFlag = !isFlag;">
        <draggable class="my-card" v-show="user.cardList.length > 0" v-model="user.cardList" :animation="300"
                   :handle="'.mover'">
            <transition-group>
                <div class="card-item mover" v-for="item in user.cardList" :style="{left: left}"
                     @drag="onDrag(item, $event)">
                    <div v-if="item.price > 0" style="font-size: 16px;color: #b21b1b">{{ item.price }}</div>
                    <div v-else style="font-weight: bold;color: rgba(190,190,190,0.8);font-size: 30px">空</div>
                </div>
            </transition-group>
        </draggable>
    </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, toRefs} from "vue";
import useStore from "@/store";
import {CardForm} from "@/api/card/types";

const {user} = useStore();
const emit = defineEmits(['dragEnteredRange'])

const props = defineProps({
    top: {
        type: String,
        default: ""
    },
    left: {
        type: String,
        default: ""
    },
});

const data = reactive({
    isFlag: false
});

const {isFlag} = toRefs(data);

const onDrag = (card: CardForm, event: DragEvent) => {
    const {clientX, clientY} = event;
    emit('dragEnteredRange', clientX, clientY, card);
};

onMounted(() => {
    user.setCardList();
})
</script>

<style scoped lang="scss">
.my-card-box {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(250, 120, 20, .5);
  z-index: 100;
  transition: 0.7s;

  &:before {
    content: "卡片";
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #FFFFFF;
  }

  .card-item {
    display: none;
  }
}

.my-card-box.sub {
  width: 60px;
  height: 230px;
  border-radius: 10px;

  &:before {
    display: none;
  }

  .my-card {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    padding: 20px 0;
    gap: 20px;

    .card-item {
      display: flex;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(250, 120, 20, .5);
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      box-shadow: 3px 3px 10px #a3622d,
      -3px -3px 10px #dd843d;
      transition: 0.5s;

      &:hover {
        cursor: pointer;
        box-shadow: none;
      }
    }
  }
}
</style>